const { ref } = Vue;

const ChildComponent = {
    name: 'ChildComponent',
    template: `
   <div style="border: solid 1px dodgerblue; padding: 5px">
    <h2>子组件</h2>
    <p>接收到的字符串消息: {{ info.message }}</p>
    <p>接收到的数字值: {{ info.numberValue }}</p>
    <p>编辑框的值: {{ info.inputValue }}</p>
    <button @click="sendButtonOneMessage" style="margin-right: 6px">按钮 1</button>
    <button @click="sendButtonTwoMessage">按钮 2</button>
  </div>
    `,
    props: {
        info: Object // 接收传递过来的 info 对象
    },
    emits: ['button-one-clicked', 'button-two-clicked'],
    setup(props, { emit }) {
        const sendButtonOneMessage = () => {
            emit('button-one-clicked', '按钮 1 被点击');
        };
        const sendButtonTwoMessage = () => {
            emit('button-two-clicked', '按钮 2 被点击');
        };

        return { sendButtonOneMessage, sendButtonTwoMessage };
    }
};
